.heter-circle{
    &::before{
    @include beforesize;
    background:
    radial-gradient(circle farthest-side at center center,transparent 96%, $normal-line 98%, $normal-line 100%,transparent) no-repeat top left 50%/30px 100% border-box,
    radial-gradient(circle farthest-side at center center,transparent 96%, $normal-line 98%, $normal-line 100%,transparent) no-repeat top 50% left 50%/300px 30px border-box,
    radial-gradient(circle closest-side at center center,transparent 90%, $normal-bg 98%, $normal-bg 100%,transparent);
    }
    &.heter-circle-respire{
    &::after{
        @include respire-base;
        background:
        radial-gradient(circle farthest-side at center center,transparent 96%, $warning-line 98%, $warning-line 100%,transparent) no-repeat top left 50%/30px 100% border-box,
        radial-gradient(circle farthest-side at center center,transparent 96%, $warning-line 98%, $warning-line 100%,transparent) no-repeat top 50% left 50%/300px 30px border-box,
        radial-gradient(circle closest-side at center center,transparent 90%, $warning-bg 98%, $warning-bg 100%,transparent);  
    }
}
}